<template>
	<view class="content">
		<view @tap="songList(item.id)" class="everyList" v-for="item in recommendList" :key="item.id">
			<view class="elImg">
				<image :src="item.coverImgUrl" mode=""></image><text>{{item.updateFrequency}}</text>
			</view>
			<view>
				<view class="elRight" v-for="(items,index) in item.tracks"
					:key="index">{{index+1}}.{{items.first}}-{{items.second}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRecommend,
	} from "../ajax/ajax.js"
	export default {
		data() {
			return {
				recommendList: [],
				elRightList: []
			}
		},
		created() {
			getRecommend().then((res) => {
				// console.log(res);
				this.recommendList = res.list.slice(0, 4)
			})
		},
		methods:{
			songList(id){
				// console.log(id);
				uni.navigateTo({
					url:"/pages/songlist/songList?id="+id
				})
			}
		}
	}
</script>

<style>
	.everyList {
		margin: 9rpx 0;
		display: flex;
	}

	.everyList image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.elImg {
		position: relative;
	}

	.elImg text {
		position: absolute;
		left: 10rpx;
		bottom: 10rpx;
		width: 180rpx;
		color: #fff;
		font-size: 16rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.elRight {
		width: 480rpx;
		margin: 20rpx;
		font-size: 26rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #666;
	}
</style>
